.dark-mode {
    cursor: pointer;
    transform: scale(.55);
    margin-inline-start:auto;
}
.dark-mode:focus-visible {
    border-radius: 50px;
    outline-offset: 20px;
    outline-width: 2px;
}

.dark-mode input {
    display: none;
}

.dark-mode input+span {
    display: block;
    border-radius: 9999px;
    width: 36px;
    height: 36px;
    position: relative;
    box-shadow: inset 16px -16px #ffd22e;
    transform: scaleY(1) rotate(-2deg);
    transition: box-shadow .5s ease 0s,transform .4s ease .1s;
}

.dark-mode input+span:before {
    content: "";
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    backface-visibility: hidden;
    transition: background-color .3s ease;
}

.dark-mode span:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    margin-top: -4px;
    margin-inline-start:-4px;position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    box-shadow: 0 -23px #ffb62e,0 23px #ffb62e,23px 0 #ffb62e,-23px 0 #ffb62e,15px 15px #ffb62e,-15px 15px #ffb62e,15px -15px #ffb62e,-15px -15px #ffb62e;
    transform: scale(0);
    transition: all .3s ease;
}

.dark-mode.is-checked span {
    box-shadow: inset 32px -32px #ffd22e;
    transform: scale(.5) rotate(0);
    transition: transform .3s ease .1s,box-shadow .2s ease 0s;
}

.dark-mode.is-checked span:before {
    background: #ffb62e;
    backface-visibility: hidden;
    transition: background-color .3s ease .1s;
}

.dark-mode.is-checked span:after {
    transform: scale(1.5);
    transition: transform .5s ease .15s;
}
